<!-- <u-read-more><rich-text nodes="666"></rich-text></u-read-more> -->
<template>
	<view class="wrap">
		<u-time-line v-if="list.length > 0">
			<u-time-line-item nodeTop="2" v-for="(item, index) in list" :key="item._id">
				<template v-slot:node>
					<view class="u-node" :style="'background:' + color16(index)"><u-icon name="bookmark-fill" color="#fff" :size="24"></u-icon></view>
				</template>
				<template v-slot:content>
					<view>
						<view class="u-order-title">{{ item.title }}</view>
						<view class="u-order-desc">{{ item.addTime | splitTime }}</view>
						<u-read-more><rich-text :nodes="item.info"></rich-text></u-read-more>
					</view>
				</template>
			</u-time-line-item>
		</u-time-line>
		<u-loadmore :status="status" v-if="list.length > 0" />
		<u-empty text="没有更多数据了~" mode="list" v-else></u-empty>
	</view>
</template>

<script>
import { uToast } from '@/uview/components/u-toast/u-toast.vue';
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			type: 'future',
			list: [],
			status: 'loadmore',
			pageIndex: 1,
			pageSize: 10
		};
	},
	filters: {
		splitTime(value) {
			return value.split(' ')[0];
		}
	},
	computed: {
		...mapGetters(['openid', 'userinfo'])
	},
	onLoad(option) {
		this.type = option.type;
		this.getListinfo(this.pageIndex, this.pageSize);
	},
	methods: {
		async getListinfo(pageIndex, pageSize) {
			this.status = 'loading';
			const { result } = await uniCloud.callFunction({
				name: 'getListInfo',
				data: {
					type: this.type,
					openid: this.openid,
					pageIndex,
					pageSize
				}
			});
			if (result.success) {
				this.pageIndex++;
				this.connectData(result.list, result.total);
			}
		},
		connectData(data, total) {
			this.list = [...this.list, ...data];
			this.$nextTick(() => {
				this.status = this.pageIndex * this.pageSize > total ? 'nomore' : 'loadmore';
				// this.$refs.uReadMore.init();
			});
		}
	},
	onReachBottom() {
		console.log('daodile')
		if (this.status === 'nomore') return;
		this.pageIndex++;
		this.getListinfo(this.pageIndex, this.pageSize);
	}
};
</script>

<style lang="scss" scoped>
.wrap {
	padding: 24rpx 24rpx 24rpx 40rpx;
}

.u-node {
	width: 44rpx;
	height: 44rpx;
	border-radius: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #d0d0d0;
}

.u-order-title {
	color: #333333;
	font-weight: bold;
	font-size: 32rpx;
}

.u-order-title.unacive {
	color: rgb(150, 150, 150);
}

.u-order-desc {
	color: #999;
	font-size: 24rpx;
	margin-bottom: 6rpx;
}

.u-order-time {
	color: rgb(200, 200, 200);
	font-size: 26rpx;
}

.tel {
	color: $u-type-primary;
}
</style>
